﻿<template>
    <el-dialog :visible.sync="showSelectShip" :title="title" width="900px">
        <div slot="title" class="elDialogTitle">
            {{ title }}
            <el-radio-group v-model="type" size="mini" @change="show">
                <el-radio-button :label="0">显示组织结构</el-radio-button>
                <el-radio-button :label="1">不显示组织结构</el-radio-button>
            </el-radio-group>
        </div>
        <div style="width: 100%;">
            <el-row :gutter="20">
                <el-col :span="type === 0 ? 8 : 0">
                    <el-card class="box-card">
                        <div v-loading="treeLoading" element-loading-background="rgba(0, 0, 0, 0)" class="elscrollbar_gg" :style="{'height': (cardBodyH -55) + 'px'}">
                            <el-scrollbar style="height:100%">
                                <organizationtree
                                    :data="organizationUnits"
                                    nodekey="treeID"
                                    show-label-name="fleetName"
                                    :expand-all="true"
                                    :show-menu="false"
                                    :expand-on-click-node="false"
                                    @node-click="handleNodeClick"
                                />
                            </el-scrollbar>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="type === 0 ? 16 : 24">
                    <el-card class="box-card">
                        <div :style="{'min-height': (cardBodyH - 55) + 'px'}">
                            <el-input v-model="shipNameFilter" size="small" placeholder="请输入船名/舷号" clearable style="margin-bottom: 10px;" @change="getTreeFleetShip(0)" />
                            <vxe-grid
                                ref="xGrid"
                                :loading="loading"
                                resizable
                                border
                                show-overflow
                                highlight-hover-row
                                :height="cardBodyH - 55 - 46"
                                align="center"
                                :columns="tableColumn"
                                :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
                                :data="allShip"
                                :pager-config="tablePage"
                                @radio-change="radioChange"
                                @checkbox-change="checkboxChange"
                                @page-change="handlePageChangeShowShip"
                                @checkbox-all="checkboxAll">
                                <template v-slot:reverse>
                                    <div class="vxePageLeft">
                                        <el-link type="primary" :underline="false" class="elLinkBTN" @click="fx">反选</el-link>
                                    </div>
                                </template>
                                <template v-slot:current_pageNum>
                                    <span class="vxe-pager--total">当前页 {{ allShip.length }} 条</span>
                                </template>
                            </vxe-grid>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="modal_footer">
            <!-- <vxe-button content="关闭" size="small" @click="close" /> -->
            <vxe-button status="primary" content="确定" size="small" @click="save" />
        </div>
    </el-dialog>
</template>

<script>
    import organizationtree from '../OrganizationTree/index.vue';
    import treeFleetAPI from '../../request/MaintData/TreeFleet.js';
    import shipAPI from '../../request/MaintData/ShipAPI.js';
    import treeTypeJson from '../../common/json/treeOption.js';
    export default {
        components: { organizationtree },
        props: {
            multiple: { type: Boolean, default: false },
            title: { type: String, default: '选择船只' }
        },
        data() {
            return {
                type: 0,
                dialogWidth: '1100px',
                cardBodyH: window.innerHeight - 434,

                showSelectShip: false,

                treeLoading: false,
                organizationUnits: [],
                selectedOrg: {},

                loading: false,
                shipNameFilter: null,
                allShip: [],
                tableColumn: [
                    { type: this.multiple ? 'checkbox' : 'radio', title: '选择', width: 80 },
                    { field: 'shipName', title: '船名' },
                    { field: 'shipCode', title: '舷号' },
                ],
                tablePage: {
                     total: 0,
                     currentPage: 1,
                     pageSize: 80,
                     align: 'right',
                     pageSizes: [80],
                     layouts: ['Sizes', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump'],
                    perfect: true,
                    slots: {
                        left: 'reverse',
                        right: 'current_pageNum'
                    }
                },

                selectShips: []
            };
        },
        mounted() {
            //this.getOrgData();
            var _this = this;
            window.onresize = () => {
                return (() => {
                    _this.cardBodyH = window.innerHeight - 434;
                    _this.setWidth();
                })();
            };
        },
        beforeDestroy() {
            window.onresize = null;
        },
        methods: {
            show() {
                this.setWidth();
                this.shipNameFilter = null;
                this.allShip = [];
                this.selectedOrg = {};
                this.selectShip = {};
                if (this.type === 0) {
                    this.getOrgData();
                } else {
                    this.getTreeFleetShip(0);
                };
                this.showSelectShip = true;
            },

            getOrgData(type) {
                if (type) {
                    this.organizationUnits = [];
                };
                this.treeLoading = true;
                treeFleetAPI.getAll().then(res => {
                    this.organizationUnits = res;
                    this.treeLoading = false;
                }).catch(err => {
                    this.treeLoading = false;
                });
            },
            handleNodeClick(data) { // 选中树节点
                this.selectedOrg = data;
                this.getTreeFleetShip(0);
            },

            getTreeFleetShip(type) {
                this.loading = true;
                var data = {};
                if (type === 0) {
                    this.tablePage.currentPage = 1;
                };
                data = {
                    pageIndex: this.tablePage.currentPage - 1,
                    pageSize: this.tablePage.pageSize,
                    queryPara: this.shipNameFilter,
                    treeID: this.type === 0 ? this.selectedOrg.treeID : ''
                };
                var api = shipAPI.getShip(data);
                api.then(res => {
                    this.allShip = res.result;
                    this.tablePage.total = res.recordCount;
                    this.loading = false;
                    this.$nextTick(() => {
                        if (this.multiple) {
                            var arr = res.result.filter(e => this.selectShips.findIndex(ee => ee.shipID === e.shipID) > -1);
                            this.$refs.xGrid.setCheckboxRow(arr, true);
                        } else {
                            if (this.selectShips && this.selectShips.shipID) {
                                var i = res.result.findIndex(e => e.shipID === this.selectShips.shipID);
                                if (i > -1) {
                                    this.$refs.xGrid.setRadioRow(res.result[i]);
                                };
                            };
                        };
                    });
                }).catch(err => {
                    this.loading = false;
                });
            },
            handlePageChangeShowShip({ currentPage, pageSize }) {
                this.tablePage.currentPage = currentPage;
                this.tablePage.pageSize = pageSize;
                this.getTreeFleetShip();
            },

            radioChange() {
                this.selectShips = this.$refs.xGrid.getRadioRecord();
            },
            checkboxChange({ checked, row }) {
                var has = this.selectShips.findIndex(e => e.shipID === row.shipID);
                if (checked && has === -1) {
                    this.selectShips.push(row);
                } else if (!checked && has > -1) {
                    this.selectShips.splice(has, 1);
                };
            },
            checkboxAll({ checked }) {
                if (checked === true) {
                    var arr = this.$refs.xGrid.getCheckboxRecords(true);
                    arr.forEach((item, i) => {
                        var has = this.selectShips.findIndex(e => e.shipID === item.shipID);
                        if (has === -1) {
                            this.selectShips.push(item);
                        };
                    });
                } else {
                    this.allShip.forEach((item, i) => {
                        var has = this.selectShips.findIndex(e => e.shipID === item.shipID);
                        if (has > -1) {
                            this.selectShips.splice(has, 1);
                        };
                    });
                }
            },
            fx() {
                var t = [];
                var f = [];
                this.allShip.filter(item => {
                    var has = this.selectShips.findIndex(e => e.shipID === item.shipID);
                    if (has === -1) {
                        t.push(item);
                        this.selectShips.push(item);
                    } else {
                        f.push(item);
                        this.selectShips.splice(has, 1);
                    }
                });
                this.$refs.xGrid.setCheckboxRow(t, true);
                this.$refs.xGrid.setCheckboxRow(f, false);
            },

            save() {
                console.log(this.selectShips)
                if (this.multiple) {
                    if (this.selectShips.length === 0) {
                        this.$message({ type: 'warning', message: '未选择船只!' });
                        return
                    };
                } else {
                    if (!this.selectShips.shipID) {
                        this.$message({ type: 'warning', message: '未选择船只!' });
                        return
                    };
                };
                this.$emit('selected', this.selectShips);
                this.showSelectShip = false;
            },

            setWidth() {
                this.dialogWidth = window.innerWidth < 1100 ? (window.innerWidth - 30) + 'px' : '1100px';
            },

            format(ops, op, hasops) {
                var val = null;
                if (hasops) {
                  var options = _(ops).map(e => { return e.options }).flatMap().valueOf();
                  val = options.find(e => e.value === op);
                } else {
                  val = ops.find(e => e.value === op);
                };
                return val ? val.label : '';
            }
        },
        template: '#template'
    };
</script>
